<template>
  <view class="appointment-detail-container">
    <template v-if="appointment">
      <view class="card">
        <view class="card-title">预约信息</view>
        <view class="detail-item">
          <text class="label">医院名称:</text>
          <text class="value">{{ appointment.hospitalName }}</text>
        </view>
        <view class="detail-item">
          <text class="label">科室名称:</text>
          <text class="value">{{ appointment.departmentName }}</text>
        </view>
        <view class="detail-item">
          <text class="label">医生姓名:</text>
          <text class="value">{{ appointment.doctorName }} ({{ appointment.doctorJobTitle }})</text>
        </view>
        <view class="detail-item">
          <text class="label">擅长领域:</text>
          <text class="value">{{ appointment.doctorProfessionalExpertise }}</text>
        </view>
        <view class="detail-item">
          <text class="label">预约日期:</text>
          <text class="value">{{ appointment.appointmentDate }}</text>
        </view>
        <view class="detail-item">
          <text class="label">预约时间:</text>
          <text class="value">{{ appointment.appointmentTimeSlot }}</text>
        </view>
        <view class="detail-item">
          <text class="label">预约编号:</text>
          <text class="value">{{ appointment.appointmentId }}</text>
        </view>
        <view class="detail-item">
          <text class="label">就诊状态:</text>
          <text class="value status-text" :class="getStatusColorClass(appointment.status, appointment.appointmentDate)">{{ appointment.status }}</text>
        </view>
      </view>

      <view class="card">
        <view class="card-title">就诊人信息</view>
        <view class="detail-item">
          <text class="label">姓名:</text>
          <text class="value">{{ appointment.patientName }}</text>
        </view>
        <view class="detail-item">
          <text class="label">手机号:</text>
          <text class="value">{{ appointment.patientPhone }}</text>
        </view>
        <view class="detail-item">
          <text class="label">身份证号:</text>
          <text class="value">{{ appointment.patientIdCard }}</text>
        </view>
        <view class="detail-item">
          <text class="label">就诊原因:</text>
          <text class="value">{{ appointment.reasonForVisit || '无' }}</text>
        </view>
      </view>

      <!-- 操作按钮区域，可根据需求添加 -->
      <view class="action-buttons-fixed">
        <button class="action-btn primary-btn" @tap="goToManagePage">返回挂号管理</button>
      </view>

    </template>
    <template v-else>
      <view class="empty-state">
        <text class="empty-text">加载中...</text>
      </view>
    </template>
  </view>
</template>

<script>
import { getAppointment } from '@/api/appointment.js';
import { getHospital } from '@/api/hospital.js';
import { getDepartment } from '@/api/department.js';
import { getInfoDoctor } from '@/api/doctor.js';

export default {
  data() {
    return {
      appointmentId: null,
      appointment: null,
    };
  },
  onLoad(options) {
    if (options.id) {
      this.appointmentId = options.id;
      this.fetchAppointmentDetails();
    }
  },
  methods: {
    async fetchAppointmentDetails() {
      if (!this.appointmentId) return;
      try {
        const res = await getAppointment(this.appointmentId);
        if (res.code === 200 && res.data) {
          const appData = res.data;

          // 补充医院、科室、医生信息
          const hospital = await getHospital(appData.hospitalId);
          const department = await getDepartment(appData.departmentId);
          const doctor = await getInfoDoctor(appData.doctorId);

          this.appointment = {
            ...appData,
            hospitalName: hospital.data ? hospital.data.name : '未知医院',
            departmentName: department.data ? department.data.name : '未知科室',
            doctorName: doctor.data ? doctor.data.name : '未知医生',
            doctorJobTitle: doctor.data ? doctor.data.jobTitle : '',
            doctorProfessionalExpertise: doctor.data ? doctor.data.professionalExpertise : '',
          };
        } else {
          uni.showToast({
            title: res.msg || '获取预约详情失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('获取预约详情请求失败:', error);
        uni.showToast({
          title: '网络错误，请稍后再试',
          icon: 'none',
        });
      }
    },
    getStatusColorClass(status, appointmentDate) {
      const today = new Date().toISOString().slice(0, 10);
      if (status === '待就诊') {
        if (appointmentDate === today) {
          return 'status-red'; // 今日就诊
        } else {
          return 'status-blue'; // 待就诊
        }
      } else if (status === '已完成') {
        return 'status-green'; // 已完成
      } else if (status === '已取消') {
        return 'status-grey'; // 已取消
      } else {
        return ''; // 默认
      }
    },
    goToManagePage() {
      uni.navigateBack({
        delta: 1 // 返回上一页（挂号管理页面）
      });
    },
  },
};
</script>

<style scoped>
.appointment-detail-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #eee;
}

.detail-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 30rpx;
  color: #666;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.value {
  font-size: 30rpx;
  color: #333;
  text-align: right;
  flex-grow: 1;
}

.status-text {
  font-weight: bold;
}

.status-blue {
  color: #4B7BFF; /* 待就诊 */
}

.status-red {
  color: #FF4D4F; /* 今日就诊 */
}

.status-green {
  color: #52C41A; /* 已完成 */
}

.status-grey {
  color: #BFBFBF; /* 已取消 */
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: #999;
  font-size: 32rpx;
}

.action-buttons-fixed {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #f5f5f5;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 15rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.primary-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background-color: #4B7BFF;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border: none;
}

.primary-btn:active {
  opacity: 0.9;
}
</style> 